<template>
  <fy-table
    ref="tableRef"
    :table-data="tableData"
    :columns="columns"
    title="多选表格"
    selection="multiple"
    v-model:selected="selected"
    :row-key="rowKey"
  >
    <template #top-right>
      <q-btn color="primary" label="获取选中项" @click="showSelected" :disable="!selected.length" />
    </template>
  </fy-table>
</template>

<script setup>
import { ref } from 'vue'
import FyTable from 'components/common/FyTable/index.vue'
import { useQuasar } from 'quasar'

const q = useQuasar()
const tableRef = ref(null)
const selected = ref([])

const tableData = ref([
  { id: 1, project: '项目A', status: '进行中', priority: '高' },
  { id: 2, project: '项目B', status: '已完成', priority: '中' },
  { id: 3, project: '项目C', status: '待启动', priority: '低' },
  { id: 4, project: '项目D', status: '已暂停', priority: '高' },
])

const rowKey = 'id'

const columns = [
  {
    name: 'project',
    label: '项目名称',
    field: 'project',
    align: 'left',
  },
  {
    name: 'status',
    label: '状态',
    field: 'status',
    align: 'center',
  },
  {
    name: 'priority',
    label: '优先级',
    field: 'priority',
    align: 'center',
  },
]

const showSelected = () => {
  console.log('选中的项：', selected.value)
  q.notify({
    message: `已选中 ${selected.value.length} 项`,
    color: 'primary',
  })
}
</script>
